<script lang="ts" setup>
import API from '@/services';
import { Message, Modal } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import { useStore } from '@/store';
import DimensionModelGraph from '../DimensionModelGraph/ModelGraph';
import BindDimensionModal from '@/views/indexDevelop/modelManage/components/BindDimensionModal/index.vue';

const store = useStore();
const props = defineProps<{ id: number | string }>();
const loading = ref(false);
const fieldVoList = ref<defs.TableFieldVo[]>([]);
const relationVoList = ref<defs.TableFieldRelationVo[]>([]);
const showBindDimension = ref(false);
const nowBindItem = ref({});
const isRevise = ref(false);
const showBindModal = (item: any) => {
  // bindDimensionList.value = [];
  nowBindItem.value = item;
  showBindDimension.value = true;
  isRevise.value = false;
};
const getModelTreeData = async () => {
  loading.value = true;
  try {
    const { code, data } = await API.dataTable.getDataTableTableFieldRelationQueryById({
      id: props.id as number
      // id: 13
    });
    console.log('data---', data);
    treeData.value = data || {};
    fieldVoList.value = data?.fieldVoList || [];
    store.commit('model/changeTableList', data?.fieldVoList || []);
    relationVoList.value = data?.relationVoList || [];
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const treeData = ref<any>({});

onMounted(() => {
  getModelTreeData();
});
// 关联维度弹窗确定传参
const sureDimension = async (val: any) => {
  if (!isRevise.value) {
    try {
      const res = await API.dataTable.postDataTableAddOrUpdateFieldRelation({
        ...val,
        tableId: props.id
      });
      if (res.code === 200) {
        Message.success('绑定成功');
        getModelTreeData();
      }
    } catch (error) {}
  } else {
    try {
      const res = await API.dataTable.postDataTableAddOrUpdateFieldRelation({ ...val });
      if (res.code === 200) {
        Message.success('修改绑定成功');
        getModelTreeData();
      }
    } catch (error) {}
  }
  showBindDimension.value = false;
  // bindDimensionList.value = val;
};
const bindDimension = (item: any) => {
  console.log('进到这了--detail');
  isRevise.value = false;
  nowBindItem.value = item;
  showBindDimension.value = true;
};
const revise = (item: any) => {
  isRevise.value = true;
  nowBindItem.value = item;
  showBindDimension.value = true;
};
// 点击解绑
const fetchUnbind = async (id: any) => {
  try {
    await API.dataTable.deleteDataTableUnboundDimTableById({ id });
    return true;
  } catch (error) {
    throw error;
  }
};
const unbind = (item: any) => {
  // 详情处需要调接口
  Modal.confirm({
    modalClass: 'model-message-confirm',
    title: '是否确定解绑该维表？',
    content: '维度解绑后，已使用其中维度的场景将无法计算数据，删除后不可恢复',
    simple: false,
    closable: true,
    okText: '确认解绑',
    okButtonProps: {
      style: {
        backgroundColor: '#FF1A3B'
      }
    },
    onBeforeOk: (done) => {
      fetchUnbind(item.id)
        .then(() => {
          Message.success('解绑成功');
          getModelTreeData();
        })
        .finally(() => {
          done(true);
        });
    }
  });
};

// 点击取消
const cancelDimension = () => {
  showBindDimension.value = false;
};
</script>
<template>
  <div style="width: 100%; height: 100%">
    <a-spin style="display: flex; height: 100%" :loading="loading">
      <DimensionModelGraph
        style="flex: 1"
        :sourceList="fieldVoList"
        :targetList="relationVoList"
        @bindDimension="bindDimension"
        @revise="revise"
        @unbind="unbind"
      />
    </a-spin>
    <BindDimensionModal
      :visible="showBindDimension"
      :now-bind-item="nowBindItem"
      :is-revise="isRevise"
      @sure-dimension="sureDimension"
      @cancel-dimension="cancelDimension"
    />
  </div>
</template>
